<template>
  <div class="app">
    <div v-if="isShowEdit">
      <input @keyup.enter="handleEnter" ref="inp" type="text" v-model="editValue" />
      <button @click="handleEnter">确认</button>
    </div>
    <div v-else>
      <span>{{ title }}</span>
      <button @click="handleClick">编辑</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '大标题',
      editValue: '',
      isShowEdit: false
    }
  },
  methods: {
    handleClick() {
      // 1.显示输入框 (异步dom更新)
      this.isShowEdit = true
      // 2.让输入框获取焦点
      // $nextTick(): 等dom更新后,才会触发执行此方法里的函数体
      this.$nextTick(() => {
        this.$refs.inp.focus()
      })
    },
    handleEnter() {
      this.title = this.editValue
      this.isShowEdit = false
    }
  },
}
</script>

<style>

</style>